<template>
    
    <!-- 组件的模板 -->
    
    <div class="page show-tabbar">
        <div class="weui-search-bar">
          <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" @click="gotoSearchList">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
          </div>
        </div>  
        <ul class="mod-tabs search_tabs" v-if="status == 0">
          <li>
              <a :class="{current: isChq}" href="javascript:;" @click="clickTab(true)">出勤({{count_chq}})</a>
          </li>
          <li>
              <a :class="{current: !isChq}" href="javascript:;" @click="clickTab(false)">未出勤({{count_not_chq}})</a>
          </li>
        </ul>

        <empty :msg.sync="message" :show-empty="showEmpty&&isChq&&memberList.length == 0"></empty>
        <empty :msg.sync="message" :show-empty="showEmpty&&!isChq&&memberList_not.length == 0"></empty>
        <ul class="user-list" :class="{pad_top: status == 0}" v-show="isChq">
            <template v-for="member in memberList">
                <li class="mod-user com-border-bottom">
                  <a href="javascript:;">
                      <div class="avatar-box" @click="toUserInfo(member.user_id,member.path)">
                          <img v-if="member.avatar" class="avatar" :src="member.avatar">
                          <img v-if="!member.avatar" class="avatar" src="../../static/imgs/avatar.png">
                          <span class="cover" v-if="member.removed == 1">已离职</span>
                      </div>
                      
                      <div class="info" @click="toDetail(member.user_id)">
                          <p class="name">
                          <template v-if="status==0">
                              <span v-for="item in member.status" :class="{'tag tag_3':item.value!=1,'tag tag_2':item.value==1}">{{item.name}}</span>
                          </template>
                          <span v-if="status!=0" :class="{'tag tag_3':member.status.value!=1,'tag tag_2':member.status.value==1}">{{member.status.name}}</span>
                          {{member.user_name}}</p>
                          <p class="team">{{member.group_name}}</p>
                      </div>
                  </a>
              </li>
            </template>
        </ul>
        <ul class="user-list" :class="{pad_top: status == 0}" v-show="!isChq">
            <template v-for="member in memberList_not">
                <li class="mod-user com-border-bottom">
                  <a href="javascript:;">
                      <div class="avatar-box" @click="toUserInfo(member.user_id,member.path)">
                          <img v-if="member.avatar" class="avatar" :src="member.avatar">
                          <img v-if="!member.avatar" class="avatar" src="../../static/imgs/avatar.png">
                          <span class="cover" v-if="member.removed == 1">已离职</span>
                      </div>
                      
                      <div class="info" @click="toDetail(member.user_id)">
                          <p class="name">
                          <!-- <template v-if="status==0">
                              <span v-for="item in member.status" :class="{'tag tag_3':item.value!=1,'tag tag_2':item.value==1}">{{item.name}}</span>
                          </template>
                          <span v-if="status!=0" :class="{'tag tag_3':member.status.value!=1,'tag tag_2':member.status.value==1}">{{member.status.name}}</span> -->
                          {{member.user_name}}</p>
                          <p class="team">{{member.group_name}}</p>
                      </div>
                  </a>
              </li>
            </template>
        </ul>
        <div class="page__bd" v-show="showMore">
            <div class="weui-loadmore">
               <i class="weui-showMore"></i>
               <span class="weui-loadmore__tips">{{showMoreTips}}</span>
            </div>
        </div>
    </div>               
</template>  

<script>
    let pageDate = {}
    let pageIndex = 1
    let pageIndex_not = 1
    let canLoadMore = 1
    let canLoadMore_not = 1
    let title = '人员列表'
    let url = ''
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import Empty from 'components/Empty/Empty'
    import KCApiApp from 'clientApi/KCApiApp.js'



    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                showEmpty:false,
                message:"",
                getDataEnd:true,
                status:-1,
                memberList:[],
                memberList_not:[],
                isChq: true,
                count_chq: 0,
                count_not_chq: 0,
                isFirst: false,
                showMore: false,
                showMoreTips: '',
                getDataNext: true,
                getNotChqNext: true,
                searchShow: false,

            }
        },
        computed:{
            
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
              commonPage.loadPageStatus('loading')
              this.isFirst = true
              // 获取缓存信息
              cache.getCache('KqCacheMessge',(data)=>{
                  pageDate.project_id = data.project_id
                  pageDate.team_id = data.team_id

                  pageDate.date = util.getUrddataString('date')
                  pageDate.group_id = util.getUrddataString('group_id')
                  this.status = util.getUrddataString('status')
                  this.setTitle()
                  this.getData()

                  if(this.status == 0){
                    this.getNotChq()
                  }
                  
               })
               
            },
            setTitle(){
                 url =  '/attendance/status_attendance_user'
                 switch(this.status){ 
                    case '0':
                        url = '/attendance/attendance_user'
                        title = '全部'
                        break
                    case '1':
                        title = '正常'
                        break
                    case '2':
                        title = '迟到'
                        break
                    case '3':
                        title = '早退'
                        break
                    case '4':
                       title = '工时短缺'
                        break
                    case '5':
                       title = '地点异常'
                       break
                    case '6':
                       title = '缺卡'
                       break
                    default:
                        break
                }
                if(this.status == 0){
                  this.searchShow = true
                  document.title = '考勤情况'
                }else{
                  document.title = title
                }
                
            },
            getData(){   
                // commonPage.loadPageStatus('loading')
                // util.scrollPageEnd(() => {
                //   if(!(canLoadMore == 0 || canLoadMore_not == 0)){
                //     this.showMore = true
                //     this.showMoreTips = '正在加载更多数据'
                //   }
                // })

                this.getDataEnd = false
                this.getDataNext = false
                console.log(pageDate)
                console.log(pageIndex)
                util.ajax({
                    url: url,
                    data: {
                      'team_id': pageDate.team_id,
                      'project_id': pageDate.project_id,
                      'group_id':pageDate.group_id,
                      'status': this.status,
                      'date': pageDate.date,
                      'page_size':10,
                      'page':pageIndex
                    },
                    success: (res) => {
                          console.log(res)
                          commonPage.loadPageStatus('loadSuccess')
                          this.getDataEnd = true
                        // res = JSON.parse(res)  
                        if(res&&res.errno==0){
                            if(res.data.length === undefined){
                              this.showMore = false
                              this.count_chq = res.data.count_user
                              this.memberList.push(...res.data.list)
                              pageIndex ++ 
                              this.getDataNext = true
                              canLoadMore = res.data.page_data.load_more
                              let innerHeight = window.innerHeight
                              if(this.isFirst && innerHeight >= 725){
                                if(this.status == 0 && !this.isChq){
                                  if(canLoadMore_not==0){
                                      // widget.toast('没有更多数据')
                                      this.showMore = true
                                      this.showMoreTips = '已经全部加载完成'
                                      return
                                  }
                                  this.getNotChq()
                                  this.showMore = true
                                  this.showMoreTips = '正在加载更多数据'
                                }else{
                                  if(canLoadMore==0){
                                      // widget.toast('没有更多数据')
                                      this.showMore = true
                                      this.showMoreTips = '已经全部加载完成'
                                      return
                                  }
                                  this.getData()
                                  this.showMore = true
                                  this.showMoreTips = '正在加载更多数据'
                                }            
                              }
                            }else if(!res.data && pageIndex > 1){
                                this.showMore = true
                                this.showMoreTips = '已经全部加载完成'
                                return
                            }
                            
                            this.showEmpty = true //请求数据结束之前不能显示空态页
                            // console.log(this.memberList)
                            if(!this.memberList.length){
                               this.showMore = false
                               if(this.status == 0){
                                this.message = '暂无出勤人员'
                               }else{
                                this.message ='考勤' + title + '人员为空'
                               }
                               
                            }else{
                              util.scrollPageEnd(() => {
                                if(!(canLoadMore == 0 || canLoadMore_not == 0)){
                                  this.showMore = true
                                  this.showMoreTips = '正在加载更多数据'
                                }
                              })
                            }
                        }else if(res.errmsg){
                          this.showMore = false
                             widget.toast(res.errmsg)
                        }else{
                          this.showMore = false
                           widget.toast('数据获取失败')
                        }
                    },
                    error: (xhr, status) => {
                      this.showMore = false
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                        this.getDataEnd = true
                        this.getDataNext = true
                    },
                    noNetwork: () => {
                      this.showMore = false
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                        this.getDataEnd = true
                        this.getDataNext = true
                    }
                })
            },
            getNotChq(){
                // commonPage.loadPageStatus('loading')
                util.scrollPageEnd(() => {
                  if(!(canLoadMore == 0 || canLoadMore_not == 0)){
                    this.showMore = true
                    this.showMoreTips = '正在加载更多数据'
                  }
                })

                this.getNotChqNext = false
                // this.getDataEnd_not = false
                // console.log(pageDate)
                // console.log(pageIndex)
                util.ajax({
                    url: '/attendance/not_attendance_user',
                    data: {
                      'team_id': pageDate.team_id,
                      'project_id': pageDate.project_id,
                      'group_id':pageDate.group_id,
                      // 'status': this.status,
                      'date': pageDate.date,
                      'page_size':10,
                      'page':pageIndex_not
                    },
                    success: (res) => {
                          console.log(res)
                          commonPage.loadPageStatus('loadSuccess')
                        //   this.getDataEnd = true
                        // // res = JSON.parse(res)  
                        if(res&&res.errno==0){
                            this.showMore = false
                            if(res.data.length === undefined){
                              this.count_not_chq = res.data.user_count
                              this.memberList_not.push(...res.data.list)
                              pageIndex_not ++ 
                              this.getNotChqNext = true
                              canLoadMore_not = res.data.page_data.load_more
                              // util.scrollPageEnd(() => {
                              //   if(canLoadMore_not==0){
                              //     alert(333)
                              //     // widget.toast('没有更多数据')
                              //     this.showMore = true
                              //     this.showMoreTips = '已经全部加载完成'
                              //     return
                              //   }
                              // })
                              
                            }
                            
                        }else if(res.errmsg){
                          this.showMore = false
                             widget.toast(res.errmsg)
                        }else{
                          this.showMore = false
                           widget.toast('数据获取失败')
                        }
                    },
                    error: (xhr, status) => {
                      this.showMore = false
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                        this.getDataEnd = true
                        this.getNotChqNext = true
                    },
                    noNetwork: () => {
                      this.showMore = false
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                        this.getDataEnd = true
                        this.getNotChqNext = true
                    }
                })
            },
            //跳转员工个人考勤统计页
            toDetail(id){
              let str = encodeURIComponent(`date=${pageDate.date}&user_id=${id}&team_id=${pageDate.team_id}&project_id=${pageDate.project_id}&origin=listbystatus`)
              window.location.href="dmsaas://KaoqinPersonal?urdData="+str
            },
            // 点击头部导航
            clickTab (label){
                this.isChq = label
                if(label){
                  this.showMore = false
                  this.message = '暂无出勤人员'
                }else{
                  this.showMore = false
                  this.message = '暂无未出勤人员'
                }
            },
            /*跳转到个人信息*/
            toUserInfo (uid,gid){
                let url = `uid=${uid}&gid=${gid}&tid=${pageDate.team_id}&pid=${pageDate.project_id}`
                location.href = "dmsaas://ProjectMemberDetail?urdData=" + encodeURIComponent(url)
            },
            // 搜索功能，本期砍掉，后期可能会加
            gotoSearchList (){
                let url = `tid=${pageDate.team_id}&pid=${pageDate.project_id}`
                location.href="dmsaas://KqSearchMember?urdData="+encodeURIComponent(url)
            }
        },
        created(){
           
            this.init();
            
            commonPage.registerHitPageBottomListener(() => {
                if(this.status == 0 && !this.isChq){
                  if(canLoadMore_not==0){
                      // widget.toast('没有更多数据')
                      this.showMore = true
                      this.showMoreTips = '已经全部加载完成'
                      return
                  }
                  if(this.getNotChqNext){
                    this.getNotChq()
                  }
                }else{
                  if(canLoadMore==0){
                      // widget.toast('没有更多数据')
                      this.showMore = true
                      this.showMoreTips = '已经全部加载完成'
                      return
                  }
                  if(this.getDataNext){
                    this.getData()
                  }
                }
                  
            }, 50)
        }
        
    }

    
</script>

<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/attendance.css"></style>
<style type="text/css">
  .pad_top{
    padding-top: 40px;
  }
  .weui-search-bar{
    position: fixed;
    top: 40px;
  }
  .user-list{
    margin-top: 45px;
  }
  .mod-tabs.search_tabs {
    position: fixed;
    width: 100%;
    left: 0;
    top: 46px;
    z-index: 99;
  }
.weui-search-bar{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
}
#searchBar{
  width: 100%;
}
.page__bd{
    color: #999999;
}
.page{
    padding: 0px!important;
}
</style>


